<!--
 * @Author: XJayXu
 * @Date: 2021-05-10 15:20:24
 * @LastEditTime: 2024-08-07 10:03:46
 * @LastEditors: Please set LastEditors
 * @Description: 操作栏
-->
<template>
  <div class="action-bar">
    <div class="btn-list">
      <div v-if="hasQr" class="btn-item">
        <img
          v-if="qrActive"
          src="~@/assets/action-bar-icon/qr-code-active.png"
          @click="qrShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/qr-code.png"
        />
      </div>
      <!-- 特殊按钮 -->
      <div v-if="hasInitialization" class="btn-item">
        <img
          v-if="initializationActive"
          src="~@/assets/action-bar-icon/dataOSO.png"
          @click="initialization"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/dataOS.png"
        />
      </div>
      <div v-if="hasFuncAuth" class="btn-item">
        <img
          v-if="funcAuthActive"
          src="~@/assets/action-bar-icon/func-auth-active.png"
          @click="funcAuthShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/func-auth.png"
        />
      </div>
      <div v-if="hasDataAuth" class="btn-item">
        <img
          v-if="dataAuthActive"
          src="~@/assets/action-bar-icon/data2.png"
          @click="dataAuthShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/data1.png"
        />
      </div>
      <div v-if="hasAssignRole" class="btn-item">
        <img
          v-if="assignRole"
          src="~@/assets/action-bar-icon/assign-role-active.png"
          @click="assignRoleShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/assign-roles-no.png"
        />
      </div>
      <div v-if="hasTemplate" class="btn-item">
        <img
          v-if="template"
          src="~@/assets/action-bar-icon/dataX.png"
          @click="templateShow"
        />
      </div>
      <div v-if="hasAdd" class="btn-item">
        <img
          v-if="addActive"
          src="~@/assets/action-bar-icon/add-active.png"
          @click="add"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/add.png"
        />
      </div>
      <div v-if="hasEdit" class="btn-item">
        <img
          v-if="editActive"
          src="~@/assets/action-bar-icon/edit-active.png"
          @click="edit"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/edit.png"
        />
      </div>
      <div v-if="hasDel" class="btn-item">
        <img
          v-if="delActive"
          src="~@/assets/action-bar-icon/del-active.png"
          @click="del"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/del.png"
        />
      </div>
      <div v-if="hasSave" class="btn-item">
        <img
          v-if="saveActive"
          src="~@/assets/action-bar-icon/save-active.png"
          @click="save"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/save.png"
        />
      </div>
      <div v-if="hasCancel" class="btn-item">
        <img
          v-if="cancelActive"
          src="~@/assets/action-bar-icon/cancel-active.png"
          @click="cancel"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/cancel.png"
        />
      </div>

      <div v-if="hasSort" class="btn-item" @click="sortData">
        排序
      </div>
      
      <div v-if="hasExport" class="btn-item">
        <img
          src="~@/assets/action-bar-icon/export.png"
          @click="goExport"
        />
      </div>

      <el-button v-if="hasView" class="showFasong" @click="view">事件统计查看</el-button>
      <el-button v-if="hasAutoBack" class="showFasong" @click="maintain('自动备份设置')">自动备份设置</el-button>
      <el-button v-if="hasManualBack" class="showFasong" @click="maintain('手动备份数据')">手动备份数据</el-button>
      <el-button v-if="hasMaintain" class="showFasong" @click="maintain('数据异常维护')">数据异常维护</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    // 二维码
    hasQr: {
      type: Boolean,
      default: false
    },
    qrActive: {
      type: Boolean,
      default: false
    },
    // 功能权限
    hasFuncAuth: {
      type: Boolean,
      default: false
    },
    funcAuthActive: {
      type: Boolean,
      default: false
    },
    // 数据权限
    hasDataAuth: {
      type: Boolean,
      default: false
    },
    dataAuthActive: {
      type: Boolean,
      default: false
    },
    // 角色分配
    hasAssignRole: {
      type: Boolean,
      default: false
    },
    assignRole: {
      type: Boolean,
      default: false
    },
    // 模板分配
    hasTemplate: {
      type: Boolean,
      default: false
    },
    template: {
      type: Boolean,
      default: false
    },
    // 添加
    hasAdd: {
      type: Boolean,
      default: true
    },
    addActive: {
      type: Boolean,
      default: true
    },
    // 修改
    hasEdit: {
      type: Boolean,
      default: true
    },
    editActive: {
      type: Boolean,
      default: false
    },
    // 删除
    hasDel: {
      type: Boolean,
      default: true
    },
    delActive: {
      type: Boolean,
      default: false
    },
    // 保存
    hasSave: {
      type: Boolean,
      default: true
    },
    saveActive: {
      type: Boolean,
      default: false
    },
    // 取消
    hasCancel: {
      type: Boolean,
      default: true
    },
    cancelActive: {
      type: Boolean,
      default: false
    },
    // 初始化
    hasInitialization: {
      type: Boolean,
      default: false
    },
    initializationActive: {
      type: Boolean,
      default: false
    },
    // 排序
    hasSort: {
      type: Boolean,
      default: false
    },
    // 导出
    hasExport: {
      type: Boolean,
      default: false
    },
    hasView: {
      type: Boolean,
      default: false
    },
    hasAutoBack: {
      type: Boolean,
      default: false
    },
    hasManualBack: {
      type: Boolean,
      default: false
    },
    hasMaintain: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    add() {
      this.$emit("add");
    },
    edit() {
      this.$emit("edit");
    },
    del() {
      this.$emit("del");
    },
    save() {
      this.$emit("save");
    },
    qrShow() {
      this.$emit("qrShow");
    },
    // 功能权限
    funcAuthShow() {
      this.$emit("funcAuth");
    },
    // 数据权限
    dataAuthShow() {
      this.$emit("dataAuth");
    },
    // 分配角色
    assignRoleShow() {
      this.$emit("assignRole");
    },
    cancel() {
      this.$emit("cancel");
    },
    sortData() {
      this.$emit('sortData')
    },
    // 特殊按钮
    initialization() {
      this.$emit('initialization')
    },
    templateShow() {
      this.$emit('templateShow')
    },
    goExport() {
      this.$emit('export')
    },
    view () {
      this.$emit('view')
    },
    maintain (val) {
      this.$emit('maintain', val)
    },
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.action-bar {
  width: 100%;
  height: $actionBarHeight;
  background-color: $hamburgerBgColor;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  .btn-list {
    display: flex;
    align-items: center;
    .btn-item {
      margin-right: 15px;
      img {
        height: 30px;
        cursor: pointer;
      }
      .not-allowed {
        cursor: not-allowed;
      }
    }
  }
}

::v-deep {
  .showFasong {
    // width: 68px;
    box-sizing: border-box;
    height: 30px;
    background: #518300;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #93d626;
    box-shadow: 0 0 0.1px 0.3px #75b4c750;
    padding: 1px 2px;
    color: #ffffff;
    font-size: 15px;
    margin-right: 10px;
    &.download {
      background: #02bcec;
      border: 1px solid #02bcec;
      > span {
        display: inline-block;
        background: #02bcec;
      }
    }
    > span {
      display: inline-block;
      // width: 62px;
      height: 24px;
      // box-sizing: border-box;
      // line-height: 10px;
      background: #93d626;
      box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.26);
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      padding: 4.5px 4px;
      // display: flex;
    }
  }
}
</style>
